<template>
  <h1> 文本插值表达式 两个花括号</h1>
  <h3>我向你问好：{{ msg }}</h3>
  <h5>包含html标签的数据是：{{ vtextvHtml }}</h5>
  <h5>去除html标签后的数据是<p v-html="vtextvHtml"></p>
  </h5>
  <!--文本插值是否只能读数据，能不能做计算-->
  <div>sum的总和是：{{ a+b }}</div>
  <!--三元运算符-->
  <div>a大于b吗？{{ a > b ? '是' : '否' }}</div>
  <!-- 指令： v-bind 是标签属性的绑定
   比如a 标签里面的属性是href v-bind:href = ''
   -->
  <h2>v-bind属性绑定练习</h2>
  <a v-bind:href="aurl">点击跳转</a>
  <img v-bind:src="imgsrc" alt="" width="80" height="80">
  <!--v-bind 简写形式 :号 语法糖 -->
  <a :href="aurl">
    <img :src="imgsrc" alt="" width="100" height="100">
  </a>


</template>
<script setup>
const msg = 'Hello Vue 3'
// 从后他读取的数据包含 html标签，需要使用 v-html 指令来渲染
const vtextvHtml = '<h1 style="color:red">Hello Vue 3</h1>'
const a = 10
const b = 20
const aurl = 'http://www.baidu.com'
const imgsrc = 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/276479/21/23354/184371/6801c03dF77c7ce14/0bb46e0705cabc9b.jpg'
</script>
<style scoped>


</style>